<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="renderer" content="webkit">
  <title>页面</title>
  <link href="<@toParam code="PATH"/>/hplus/css/bootstrap.min.css" rel="stylesheet">
  <link href="<@toParam code="PATH"/>/hplus/css/font-awesome.min.css" rel="stylesheet">
  <link href="<@toParam code="PATH"/>/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
  <link href="<@toParam code="PATH"/>/hplus/css/plugins/ztree/metroStyle/metroStyle.css" rel="stylesheet">
  <link href="<@toParam code="PATH"/>/hplus/css/style.min.css" rel="stylesheet">
  <link href="<@toParam code="PATH"/>/hplus/css/hsys.extend.css" rel="stylesheet">
</head>
<body class="gray-bg" style="padding: 5px 10px">
	<div class="row">
		<div class="col-xs-4">		
			<div class="ibox">
				<div class="ibox-title">
					<h5>节点目录</h5>
					<div class="pull-right">
						<a href="javascript:" style="font-size:12px;color: #666" onclick="expandAll(true);" title="全部展开">展开</a>&nbsp;&nbsp;
						<a href="javascript:" style="font-size:12px;color: #666" onclick="expandAll(false);" title="全部展开">收起</a>&nbsp;&nbsp;
						<a href="javascript:" style="font-size:12px;color: #666" onclick="add(0);">新增根节点</a>
					</div>
				</div>
				<div class="ibox-content">
					<ul id="ZTree" class="ztree"></ul>
				</div>
			</div>	
		</div>
		<div class="col-xs-8" id="addEdit">
			<div class="ibox">
				<div class="ibox-title">
					<h5>目录编辑</h5>
				</div>
				<div class="ibox-content">
					<div style="text-align: center;line-height: 50px"><i class="glyphicon glyphicon-repeat"></i>&nbsp;点击左侧树形菜单或新增按钮</div>
				</div>
			</div>
		</div>
	</div>
	<script src="<@toParam code="PATH"/>/hplus/js/jquery.min.js"></script>
	<script src="<@toParam code="PATH"/>/hplus/js/bootstrap.min.js"></script>
  <script src="<@toParam code="PATH"/>/hplus/js/plugins/validate/jquery.validate.min.js"></script>
  <script src="<@toParam code="PATH"/>/hplus/js/plugins/validate/messages_zh.min.js"></script>
  <script src="<@toParam code="PATH"/>/hplus/js/plugins/layer/layer.min.js"></script>
  <script src="<@toParam code="PATH"/>/hplus/js/plugins/ztree/jquery.ztree.all.min.js"></script>
  <script src="<@toParam code="PATH"/>/hplus/js/gcore_ext.js"></script>
  <script>
		var zNodes = ${regionJSON!'[]'};
		
	 	$().ready(function() {
			$.fn.zTree.init($("#ZTree"), {
				data: {
					simpleData: {
						enable: true
						}
				},
				callback:{
					onClick:treeOnClick
					}
				}, zNodes);
		});
		
		function add(id){
			$("#addEdit").loadUrl("addEditRegion?parent_id="+id,{},function(){
				initUI(document.getElementById("addEdit"));
			});
		}
		function thisAjaxDone(json){
			GCore.ajaxDone(json);
			var treeObj = $.fn.zTree.getZTreeObj("ZTree");
			var node = treeObj.getNodeByParam("id", json.object.id, null);
			if(node){
				node.name = json.object.province+json.object.city+json.object.district;
				treeObj.updateNode(node);
			}else {
				var newNode = {id:json.object.id, pId:json.object.parent_id, name:json.object.province+json.object.city+json.object.district};
				var parent = null;
				if(json.object.parent_id!=null){
					parent = treeObj.getNodeByParam("id", json.object.parent_id, null);
				}
				treeObj.addNodes(parent, newNode);
			}
			$("#addEdit").loadUrl("addEditRegion",{id:json.object.id},function(){
				initUI(document.getElementById("addEdit")); 
			});
		}
		function deleteAjaxTodo(json){
			GCore.ajaxDone(json);
			if(json.result=="success"){
				var treeObj = $.fn.zTree.getZTreeObj("ZTree");
				var node = treeObj.getNodeByParam("id", json.id, null);
				treeObj.removeNode(node);
				closeEdit();
			}
		}
		var addEditHtml = $("#addEdit").html();
		function closeEdit(){
			$("#addEdit").html(addEditHtml);
		}
	  function treeOnClick(event, treeId, treeNode){
			$("#addEdit").loadUrl("addEditRegion",{id:treeNode.id},function(){
				initUI(document.getElementById("addEdit"));
			});
	  }
		function expandAll(flag){
			var treeObj = $.fn.zTree.getZTreeObj("ZTree");
			treeObj.expandAll(flag);
		}
  </script>
</body>
</html>
